<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试页面</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
    <el-row>
        <el-col :span="24">
            <div class="grid-content bg-purple-dark"></div>
        </el-col>
    </el-row>
    <style>
        .el-row {
            margin-bottom: 200px;
        }

        .el-col {
            border-radius: 400px;
        }

        .bg-purple-dark {
            background: #99a9bf;
        }

        .bg-purple {
            background: #d3dce6;
        }

        .bg-purple-light {
            background: #e5e9f2;
        }

        .grid-content {
            border-radius: 4px;
            min-height: 36px;
        }

        .row-bg {
            padding: 10px 0;
            background-color: #f9fafc;
        }
    </style>
    <el-row>
        <el-col :span="12">
            <div class="grid-content bg-purple"></div>
        </el-col>
        <el-col :span="12">
            <div class="grid-content bg-purple-light"></div>
        </el-col>
    </el-row>
    <div>
        <!--    <el-tag closable :type="tag.type">{{job.jobName}}</el-tag>-->
        <el-form ref="job" :model="job" label-width="80px">
            <el-form-item label="兼职名称">
                <el-input v-model="job.jobName" v-bind:disabled="disable"></el-input>
            </el-form-item>
            <el-form-item label="兼职地点">
                <el-input v-model="job.jobPlace" v-bind:disabled="disable"></el-input>
            </el-form-item>
            <el-form-item label="学历要求">
                <el-input v-model="job.jobRequirement" v-bind:disabled="disable"></el-input>
            </el-form-item>
            <el-form-item label="兼职时间">
                <el-col :span="11">
                    <el-date-picker v-bind:disabled="disable" type="date" placeholder="开始日期" v-model="job.jobStart"
                                    style="width: 100%;"></el-date-picker>
                </el-col>
                <el-col class="line" :span="2"></el-col>
                <el-col :span="11">
                    <el-time-picker v-bind:disabled="disable" placeholder="结束时间" v-model="job.jobEnd"
                                    style="width: 100%;"></el-time-picker>
                </el-col>
            </el-form-item>
            <el-form-item label="是否急招">
                <el-switch v-bind:disabled="disable" v-model="job.urgent"></el-switch>
            </el-form-item>
            <el-form-item label="兼职类型">
                <template>
                    <el-radio v-model="job.jobType" :disabled="disable" label="老师">老师</el-radio>
                    <el-radio v-model="job.jobType" :disabled="disable" label="服务员">服务员</el-radio>
                    <el-radio v-model="job.jobType" :disabled="disable" label="外卖骑手">外卖骑手</el-radio>
                    <el-radio v-model="job.jobType" :disabled="disable" label="收银员">收银员</el-radio>
                    <el-radio v-model="job.jobType" :disabled="disable" label="快递">快递</el-radio>
                </template>
            </el-form-item>
            <el-form-item label="兼职内容">
                <el-input type="textarea" v-model="job.desc"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit" v-bind:disabled="!disable">申请兼职</el-button>
                <el-button type="primary" @click="onSubmit" v-bind:disabled="disable">创建兼职</el-button>
            </el-form-item>
        </el-form>
    </div>
</div>


<script src="js/vue.js"></script>
<script src="js/axios.js"></script>
<script src="https://unpkg.com/element-ui@2.15.1/lib/index.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                jobId: 2020,
                disable: false,
                job: {
                    jobName: '',
                    jobType: '服务员',
                    jobPlace: '',
                    salary: '',
                    jobRequirement: '',
                    jobStart: '',
                    salaryMode: '',
                    jobEnd: '',
                    jobHourDay: '',
                    jobId: '',
                    urgent: true,
                    jobRequirement: '',
                    jobNum: '',
                    havenNum: '',
                },

            }
        },
        created: function () {
            let that = this
            axios.get("http://localhost:8002/service_job/job/findById/" + this.jobId).then(res => {
                console.log(res)
                that.job = res.data.data.job
            })
        },
        methods: {
            onSubmit() {
                console.log('submit!');
            },
            getId() {

            },
            getU(u) {
                if (u == 1) {
                    this.urgent = true;
                } else this.urgent = false;
            }
        }
    })
</script>
</body>
</html>